<template>
	<div class="mt-30px mb-70px">
		<p class="text-#000000 text-18px font-bold">我的广告</p>
		<div class="mt-20px">
			<div class="flex">
				<div class="w-130px mr-20px">币种</div>
				<div class="w-130px mr-20px">类型</div>
				<div class="w-130px mr-20px">状态</div>
				<div>时间</div>
			</div>
		</div>
		<div class="mt-10px flex items-center justify-between">
			<div class="flex items-center">
				<!-- 币种选择 -->
				<div class="mr-20px">
					<el-select v-model="searchItems.coin" placeholder="选择" size="large" style="width: 130px"
						suffix-icon="CaretBottom" popper-class="personal-ad-popper">
						<el-option v-for="item in listCoin" :key="item" :label="item" :value="item" />
					</el-select>
				</div>
				<!-- 类型选择 -->
				<div class="mr-20px">
					<el-select v-model="searchItems.methods" placeholder="选择" size="large" style="width: 130px"
						suffix-icon="CaretBottom" popper-class="personal-ad-popper">
						<el-option v-for="item in listMethods" :key="item" :label="item" :value="item" />
					</el-select>
				</div>
				<!-- 状态选择 -->
				<div class="mr-20px">
					<el-select v-model="searchItems.status" placeholder="选择" size="large" style="width: 130px"
						suffix-icon="CaretBottom" popper-class="personal-ad-popper">
						<el-option v-for="item in listStatus" :key="item" :label="item" :value="item" />
					</el-select>
				</div>
				<!-- 时间选择 -->
				<div class="mr-20px">
					<el-date-picker v-model="searchItems.startTime" type="daterange" start-placeholder="开始时间"
						end-placeholder="结束时间" format="YYYY/MM/DD" value-format="YYYY-MM-DD" unlink-panels
						style="height: 40px;">
						<template #prev-month>
							<el-icon>
								<CaretLeft />
							</el-icon>
						</template>
						<template #next-month>
							<el-icon>
								<CaretRight />
							</el-icon>
						</template>
						<template #prev-year>
							<el-icon>
								<svg viewBox="0 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg">
									<g stroke-width="1" fill-rule="evenodd">
										<g fill="currentColor">
											<path
												d="M8.73171,16.7949 C9.03264,17.0795 9.50733,17.0663 9.79196,16.7654 C10.0766,16.4644 10.0634,15.9897 9.76243,15.7051 L4.52339,10.75 L17.2471,10.75 C17.6613,10.75 17.9971,10.4142 17.9971,10 C17.9971,9.58579 17.6613,9.25 17.2471,9.25 L4.52112,9.25 L9.76243,4.29275 C10.0634,4.00812 10.0766,3.53343 9.79196,3.2325 C9.50733,2.93156 9.03264,2.91834 8.73171,3.20297 L2.31449,9.27241 C2.14819,9.4297 2.04819,9.62981 2.01448,9.8386 C2.00308,9.89058 1.99707,9.94459 1.99707,10 C1.99707,10.0576 2.00356,10.1137 2.01585,10.1675 C2.05084,10.3733 2.15039,10.5702 2.31449,10.7254 L8.73171,16.7949 Z" />
										</g>
									</g>
								</svg>
							</el-icon>
						</template>
						<template #next-year>
							<el-icon>
								<svg viewBox="0 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg">
									<g stroke-width="1" fill-rule="evenodd">
										<g fill="currentColor">
											<path
												d="M11.2654,3.20511 C10.9644,2.92049 10.4897,2.93371 10.2051,3.23464 C9.92049,3.53558 9.93371,4.01027 10.2346,4.29489 L15.4737,9.25 L2.75,9.25 C2.33579,9.25 2,9.58579 2,10.0000012 C2,10.4142 2.33579,10.75 2.75,10.75 L15.476,10.75 L10.2346,15.7073 C9.93371,15.9919 9.92049,16.4666 10.2051,16.7675 C10.4897,17.0684 10.9644,17.0817 11.2654,16.797 L17.6826,10.7276 C17.8489,10.5703 17.9489,10.3702 17.9826,10.1614 C17.994,10.1094 18,10.0554 18,10.0000012 C18,9.94241 17.9935,9.88633 17.9812,9.83246 C17.9462,9.62667 17.8467,9.42976 17.6826,9.27455 L11.2654,3.20511 Z" />
										</g>
									</g>
								</svg>
							</el-icon>
						</template>
					</el-date-picker>
				</div>

				<div class="mr-20px">
					<el-button type="primary" color="#114CEE" style="height: 40px;">筛选</el-button>
				</div>
				<div>
					<el-button type="primary" color="#C9CDD4" style="color:#fff;height: 40px;">重置</el-button>
				</div>
			</div>
			<p class="text-#114CEE text-14px cursor-pointer" @click="jumpTo('/transaction/c2c/c2cMore/historyAd')">历史广告</p>
		</div>

		<!-- 表格 -->
		<div class="mt-20px min-h-500px">
			<el-table :data="tableData" :border="false" style="width: 100%">
				<template #empty>
					<div class="flex items-center justify-center h-500px">
						<div class="flex flex-col items-center">
							<img src="/transaction/c2c/c2cMore/noData.svg" class="w-192px h-110px" />
							<p class="text-#BBBBBB text-14px mt-20px">暂无数据</p>
							<div class="flex items-center justify-center mt-10px border-1px border-#000000 border-solid rounded-26px w-180px cursor-pointer"
							@click="jumpTo('/transaction/c2c/c2cMore/advertising')">
								<img src="/transaction/c2c/c2cMore/fill-add.svg" alt="" class="w-18px h-18px">
								<p class="ml-10px">
									发布广告
								</p>
							</div>
						</div>
					</div>
				</template>
				<el-table-column type="expand">
					<template #default="props">
						<div class="bg-#F6F6F6 pt-30px pb-30px
						pl-60px pr-60px text-12px">
							<p class="text-#000000 mb-20px">
								<span>更新时间：{{ props.row.detail.update }}</span>
								<span class="ml-20px">创建时间：
									{{ props.row.detail.create }}
								</span>
							</p>
							<div class="flex items-center justify-between">
								<div>
									<p class="text-#86909C mb-10px">上架总数量</p>
									<p>{{ props.row.detail.put }}</p>
								</div>
								<div>
									<p class="text-#86909C mb-10px">已成交交易数量</p>
									<p>{{ props.row.detail.sell }}</p>
								</div>
								<div>
									<p class="text-#86909C mb-10px">订单限额</p>
									<p>
										{{ props.row.detail.orderMin }}
										-
										{{ props.row.detail.orderMax }}
									</p>
								</div>
								<div>
									<p class="text-#86909C mb-10px">价格/汇率</p>
									<p>
										{{ props.row.detail.price }}
										/
										{{ props.row.detail.rate }}
									</p>
								</div>
							</div>
						</div>
					</template>
				</el-table-column>
				<el-table-column label="广告编号" prop="id">
					<template #default="scope">
						<div class="flex items-center justify-between pl-10px pr-10px pt-30px pb-30px">
							<p>{{ scope.row.id }}</p>
							<img src="/transaction/c2c/c2cMore/copy.svg" class="w-16px h-16px cursor-pointer"/>
						</div>
					</template>
				</el-table-column>
				<el-table-column label="出售" prop="methods" :filters="[
					{ text: '出售', value: '出售' },
					{ text: '购入', value: '购入' }
				]" :filter-method="filterTag">
					<template #filter-icon>
						<el-icon class="ml-6px">
							<CaretBottom />
						</el-icon>
					</template>
				</el-table-column>
				<el-table-column label="币种/法币" prop="methods">
					<template #default="scope">
						<p>
							<span>{{ scope.row.coin }}</span>
							<span> / </span>
							<span>{{ scope.row.legal }}</span>
						</p>
					</template>
				</el-table-column>
				<el-table-column label="支付方式" prop="pay">
					<template #default="scope">
						<div class="flex items-center">
							<p :style="{ backgroundColor: getPaymentType(scope.row.pay).color }"
								class="w-4px h-14px mr-6px"></p>
							<p>{{ getPaymentType(scope.row.pay).name }}</p>
						</div>
					</template>
				</el-table-column>
				<el-table-column label="状态" prop="status">
					<template #default="scope">
						<div class="flex items-center">
							<el-switch v-model="scope.row.status" size="large"/>
							<p class="ml-10px">{{ scope.row.status ? "已上架" : "未上架" }}</p>
						</div>
					</template>
				</el-table-column>
				<el-table-column label="操作">
					<template #default="scope">
						<div class="flex items-center">
							<el-button class="mr-16px" type="primary" color="#07B175" style="width:90px;height: 40px;"
							@click="jumpTo('/transaction/c2c/c2cMore/updateAd')">编辑广告</el-button>
							<el-button class="mr-20px" type="primary" color="#F34E5F" style="width:90px;height: 40px;color:#fff;">删除广告</el-button>
						</div>
					</template>
				</el-table-column>
			</el-table>
		</div>
	</div>
</template>
<script lang="ts" setup>
import useJump from "@/utils/jump";
import { getPaymentType } from "@/utils/common";

const {jumpTo} = useJump();
const searchItems = ref<any>({
	coin: '全部币种',
	methods: '所有类型',
	status: '所有状态',
	startTime: '',
	endTime: ''
})

const listCoin = ref<any>([
	'全部币种', 'BTC', 'ETH', 'USDT'
])

const listMethods = ref<any>([
	'所有类型', '出售', '购买'
])

const listStatus = ref<any>([
	'所有状态', '已上架', '已下架'
])

const tableData = ref<any[]>([
	{
		id: "232535622562562",
		methods: "出售",
		coin: "BTC",
		legal: "ETH",
		pay: '1',
		status: true,
		detail: {
			update: '2024-11-20 12:00:00',
			create: '2024-11-20 12:00:00',
			put: '1202.00 USDT',
			sell: '1202.00 USDT',
			orderMin: '￥100',
			orderMax: '￥1000',
			price: '￥100',
			rate: 4.23
		}
	},
	{
		id: "232535622562562",
		methods: "出售",
		coin: "BTC",
		legal: "ETH",
		pay: '1',
		status: false,
		detail: {
			update: '2024-11-20 12:00:00',
			create: '2024-11-20 12:00:00',
			put: '1202.00 USDT',
			sell: '1202.00 USDT',
			orderMin: '￥100',
			orderMax: '￥1000',
			price: '￥100',
			rate: 4.23
		}
	}
])

const filterTag = (value: string, row: any) => {
	return row.methods === value
}
</script>
<style lang="scss" scoped>
::v-deep .el-table__cell{
	padding: 0;
}
</style>
<style lang="scss">
.personal-ad-popper {
	.el-scrollbar__view {
		padding: 0;
	}

	.el-popper__arrow {
		display: none;
	}
}
</style>
